<template>
  <div class="userInfo">
    <!-- 搜索框 -->
    <!--<div class="navSearchBox">
      <el-input v-model="searchID" class="input-with-select searchContent" placeholder="请输入用户ID" style="width: 40%">
        <el-button slot="append" class="searchButton" icon="el-icon-search" @click="onSubmit()" />
      </el-input>
    </div>-->
   <!-- <el-card class="box-card-info" shadow="always" style="width: 100%">
      <div slot="header" class="clearfix">
        <span style=" float:left;font-weight:bold">客户信息</span>
      </div>
      <el-form ref="form" :inline="true" style="text-align: left">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户ID: ">
              {{ userForm.custId }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记姓名:">
              {{ userForm.custName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡号:">
              {{ userForm.serialNum }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码:">
              {{ userForm.contactPhone }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入网时间:">
              {{ userForm.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入网年限:">
              {{ userForm.duration }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否欠费:">
              {{ userForm.custStatus }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区域:">
              {{ userForm.fullAddr }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="echartsBox">
      <el-card class="chartBox userLevelBox">
        <div slot="header" class="clearfix">
          <span style=" float:left;font-weight:bold">客户画像</span>
        </div>
        &lt;!&ndash; 头像 &ndash;&gt;
        <el-row>
          <el-col :span="6">
            <div class="userIcon"><img src="@/assets/usericon.png" alt=""></div>
          </el-col>
          &lt;!&ndash; 标签 &ndash;&gt;
          <el-col :span="18">
            <div class="tagBox">
              <h4 class="title">客户属性</h4>
              <div class="box">
                <span v-for="(item, index) in tagTable.userAttribute" :key="index" style="margin-left: 10px">
                  <el-tag :span="6">{{ item }}</el-tag>
                </span>
              </div>
            </div>
            <div class="tagBox">
              <h4 class="title">收视行为</h4>
              <div class="box">
                <span v-for="(item, index) in tagTable.viewsBehavior" :key="index" style="margin-left: 10px">
                  <el-tag>{{ item }}</el-tag>
                </span>
              </div>
            </div>
            <div class="tagBox">
              <h4 class="title">业务属性</h4>
              <div class="box">
                <span v-for="(item, index) in tagTable.businessAttribute" :key="index" style="margin-left: 10px">
                  <el-tag style="margin-left: 10px">{{ item }}</el-tag>
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>-->
    hello
  </div>
</template>

<script>
/* import { getUserInfo } from '@/api/userInfo'
import { findLabelByUserId } from '@/api/label'*/

export default {

  data() {
    return {
      listLoading: false,
      userForm: {},
      searchID: '',
      userTag: {},
      tagTable: {
        userAttribute: [],
        businessAttribute: [],
        viewsBehavior: []
      },
      flag: true
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.userForm = {
        custStatus: 1,
        custId: '202012002',
        custName: '王海洲',
        serialNum: '8280202374116016',
        contactPhone: '18208293310',
        createTime: '2019-03-24 00:00:00',
        duration: '1',
        fullAddr: '成都市青羊区光华大道'
      }
      this.tagTable = {
        userAttribute: ['20-30岁'],
        businessAttribute: ['电影'],
        viewsBehavior: ['测试']
      }
    }

  }
}
</script>

<style lang="less" scoped>
  .userInfo {
    padding: 20px;
    background-color: #f4f5fc;
    // background-color: #fafafa;
    height: 100%;
    // 基本信息
    .box-card-info {
      margin-top: 20px;
    }
    // 用户画像
    .echartsBox {
      margin-top: 20px;
      .userIcon {
        width: 200px;
        height: 200px;
        // border-radius: 50%;
        // background-color: #e6e6e6;
        text-align: center;
        line-height: 200px;
        // margin-top: 50px;
        margin: 100px auto;
        // margin-left: 40px;
      }
      .tagBox {
        width: 100%;
        border: 1px solid #e6e6e6;
        padding: 10px 20px;
        margin: 15px 0;
        .title {
          border-left: 5px solid #7da4ff;
          padding-left: 10px;
        }
      }
    }
  }

  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: left;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: transparent;
    color: #333;
    text-align: center;
    line-height: 160px;
    border-radius: 30px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .text {
    font-size: 14px;
  }
  .user {
    background-color: transparent;
    text-align: center;
    line-height: 40px;
    margin-top: 5%;
    margin-bottom: 3%;
  }
  .userLabel {
    background-color: transparent;
    text-align: left;
    line-height: 80px;
    margin-bottom: 7%;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>

